<!DOCTYPE html>
<!--头部公共部分-->
{include file="common/header" /}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>管理</a>
        <a>
          <cite>招生报表</cite></a>
      </span>
    <a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i> </a>
</div>

<div class="layui-tab layui-tab-card" lay-filter="filter">
    <ul class="layui-tab-title">
        <li class="layui-this">销售漏斗</li>
        <li>来源分析</li>
        <li>客户成熟度</li>
    </ul>

    <div class="layui-tab-content" >
        <div class="layui-tab-item layui-show">
            <div id="container" style="height: 550px;"></div>
            <script>
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);

                var data_enrollment_report = eval('{$data_enrollment_report}');
                var enrollment_report_name =[];
                var enrollment_report_value =[];

                for(var i=0; i < data_enrollment_report.length; i++){
                    enrollment_report_name[i] = data_enrollment_report[i].name;
                    var row = {};
                    row['value'] = data_enrollment_report[i].value;
                    row['name'] = data_enrollment_report[i].name;
                    enrollment_report_value[i] = row;
                }

                option = null;
                option = {
                    title: {
                        text: '销售漏斗',
                        subtext: '销售数据统计'
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        //       data: ['未处理','未分配','已联系','已邀约','已上门']
                        data:enrollment_report_name
                    },
                    calculable: true,
                    series: [
                        {
                            name:'销售漏斗',
                            type:'funnel',
                            left: '10%',
                            top: 60,
                            //x2: 80,
                            bottom: 60,
                            width: '80%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            max: 100,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            /*
							data: [
								{value: 60, name: '未处理'},
								{value: 40, name: '未分配'},
								{value: 20, name: '已联系'},
								{value: 80, name: '已邀约'},
								{value: 100, name: '已上门'}
							]
							*/

                            data:enrollment_report_value
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            </script>
            <table class="layui-hide" id="LAY_table_user" lay-filter="Event_infos"></table>
        </div>
        <div class="layui-tab-item">
            <div id="container_channel" style="height: 550px;"></div>

            <div  class="x-body" class="clear:both;">
                <div class="layui-row" style="border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
                    <div class="layui-form layui-col-md12 x-so layui-form-pane">
                        <div class="layui-input-inline">

                        </div>
                        <div class="layui-input-inline">
                            <input type="text" style="width: 180px;" name="date_range"  id="range_date" placeholder="选择日期范围" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn" id="search">
                                <i class="layui-icon layui-icon-search"></i>筛选</button>
                            <button class="layui-btn layui-btn-danger" id="clear">
                                <i class="layui-icon"></i>重置</button>

                        </div>
                    </div>
                </div>
                <table class="layui-hide" id="LAY_table_user_channel"></table>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="container_level" style="height: 550px;"></div>
            <div  class="x-body" class="clear:both;">
                <div class="layui-row" style="border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
                    <div class="layui-form layui-col-md12 x-so layui-form-pane">
                        <div class="layui-input-inline">

                        </div>
                        <div class="layui-input-inline">
                            <input type="text" style="width: 180px;" name="date_range_level"  id="range_date_level" placeholder="选择日期范围" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn" id="search_level">
                                <i class="layui-icon layui-icon-search"></i>筛选</button>
                            <button class="layui-btn layui-btn-danger" id="clear_level">
                                <i class="layui-icon"></i>重置</button>

                        </div>
                    </div>
                </div>
                <table class="layui-hide" id="LAY_table_user_level"></table>
            </div>
        </div>
    </div>
</div>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
    layui.use(['form', 'element', 'table','laydate', 'layer', 'laytpl'], function () {
        var $ = layui.$,
                form = layui.form,
                table = layui.table,
                laydate = layui.laydate,
                element = layui.element,
                layer = layui.layer;
        var loading = layer.load();

        element.on('tab(filter)', function(data){
            console.log(this); //当前Tab标题所在的原始DOM元素
            console.log(data.index); //得到当前Tab的所在下标
            console.log(data.elem); //得到当前的Tab大容器

            if(data.index === 0){

                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);

                var data_enrollment_report = eval('{$data_enrollment_report}');
                var enrollment_report_name =[];
                var enrollment_report_value =[];

                for(var i=0; i < data_enrollment_report.length; i++){
                    enrollment_report_name[i] = data_enrollment_report[i].name;
                    var row = {};
                    row['value'] = data_enrollment_report[i].value;
                    row['name'] = data_enrollment_report[i].name;
                    enrollment_report_value[i] = row;
                }

                option = null;
                option = {
                    title: {
                        text: '销售漏斗',
                        subtext: '销售数据统计'
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        data:enrollment_report_name
                    },
                    calculable: true,
                    series: [
                        {
                            name:'销售漏斗',
                            type:'funnel',
                            left: '10%',
                            top: 60,
                            //x2: 80,
                            bottom: 60,
                            width: '80%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            max: 100,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            /*
                             data: [
                             {value: 60, name: '未处理'},
                             {value: 40, name: '未分配'},
                             {value: 20, name: '已联系'},
                             {value: 80, name: '已邀约'},
                             {value: 100, name: '已上门'}
                             ]
                             */

                            data:enrollment_report_value
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

            }  //销售漏斗

            if(data.index === 1){
                var dom_channel = document.getElementById("container_channel");
                var myChart_channel = echarts.init(dom_channel);
                var data_channel_elimination = eval('{$enrollment_channel_report}');
                var channel_count =[];
                var channel_name =[];
                for(var i=0; i < data_channel_elimination.length; i++){

                    channel_name[i] = data_channel_elimination[i].name;
                    channel_count[i] = data_channel_elimination[i].value;

                }
                option = null;
                option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },

                    legend: {
                        right: 10,
                        data: ['客户数量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: channel_name,
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '客户数量',
                            barWidth: '40%',
                            type: 'bar',
                            data:channel_count
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart_channel.setOption(option, true);
                }

            }  //渠道分析

            if(data.index === 2){
                var dom_level = document.getElementById("container_level");
                var myChart_level = echarts.init(dom_level);

                var enrollment_intentional_report = eval('{$enrollment_intentional_report}');
                var enrollment_intentiona_data =[];
                var enrollment_intentiona_name = [];
                for(var i=0; i < enrollment_intentional_report.length; i++){
                    var row = {};
                    row['value'] = enrollment_intentional_report[i].value;
                    row['name'] = enrollment_intentional_report[i].name;
                    enrollment_intentiona_name[i] = enrollment_intentional_report[i].name;
                    enrollment_intentiona_data[i] = row;
                }


                option = null;
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        data:enrollment_intentiona_name
                    },
                    series: [
                        {
                            name:'客户成熟度',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:enrollment_intentiona_data
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart_level.setOption(option, true);
                }

            }   //意向级别

            if(data.index === 3 || data.index === 4 || data.index === 5){
                document.getElementById("door_admin").style.visibility="visible";
                document.getElementById("audition_admin").style.visibility="visible";
                document.getElementById("introduction_admin").style.visibility="visible";
            }else{
                document.getElementById("door_admin").style.visibility="hidden";
                document.getElementById("audition_admin").style.visibility="hidden";
                document.getElementById("introduction_admin").style.visibility="hidden";
            }


        });


        //数据表格 方法级渲染
        var tableIns = table.render({
            elem: '#LAY_table_user'
            , url: '{:url("enrollment/getenrollmentlist")}'
            , method: 'POST'
            , toolbar: 'true' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['print', 'exports'] // 筛选图标
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                //今日跟进，昨天跟进，本周跟进，上周跟进，本月跟进，上月跟进，今年跟进，去年跟进
                {field: 'name', title: '销售', width: 180, style:'color:#01AAED;font-weight: bold;', align: 'center'
                },{field: 'today', title: '今日跟进', width: 150, align: 'center'
                },{field: 'yesterday', title: '昨天跟进', width: 150, align: 'center'
                },{field: 'week', title: '本周跟进',  width: 150, align: 'center'
                },{field: 'lastweek', title: '上周跟进', width: 150, align: 'center'
                },{field: 'month', title: '本月跟进', width: 150, align: 'center'
                },{field: 'lastmonth', title: '上月跟进', width: 150, align: 'center'
                },{field: 'year', title: '今年跟进', width: 150, align: 'center'
                },{field: 'lastyear', title: '去年跟进', width: 150, align: 'center'
                }
            ]]
            , height: 'full-180'
            , page: true
            , title: '销售报表'
            , limits: [10,20,30,40,50,60,70,80,90,10000000]
            , done: function () {
                layer.close(loading);
            }
        });


        //数据表格 方法级渲染 来源渠道分析
        var tableIns_channel = table.render({
            elem: '#LAY_table_user_channel'
            , url: '{:url("enrollment/getstudentchannellist")}'
            , method: 'POST'
            , toolbar: 'true' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['print', 'exports'] // 筛选图标
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                {field: 'name', title: '来源', style:'color:#01AAED;font-weight: bold;', align: 'center'
                },{field: 'count', title: '客户数量', align: 'center'
                },{field: 'rate', title: '比例',   align: 'center'
                },{field: 'successful_transformation', title: '转化成功',  align: 'center'
                },{field: 'successful_transformation_rate', title: '转化率',  align: 'center'
                }
            ]]
            , height: 'full-180'
            , page: true
            , title: '来源分析'
            , limits: [10,20,30,40,50,60,70,80,90,10000000]
            , done: function () {
                layer.close(loading);
            }
        });

        //日期
        laydate.render({
            elem: '#range_date',
            range: true
            ,trigger: 'click'
        });

        //搜索项
        $('#search').click(function () {
            var field = {};
            var create_date_rang = $('input[name=date_range]').val();
            if(create_date_rang.length > 0){
                strs_date=create_date_rang.split("-"); //字符分割
                field.start_date = strs_date[0]+'-'+strs_date[1]+'-'+strs_date[2];
                field.end_date = strs_date[3]+'-'+strs_date[4]+'-'+strs_date[5];
            }
            console.log(field);
            tableIns_channel.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            $.ajax({
                url: '/admin/enrollment/searchstudentchannellist',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    //      layer.msg(result.msg);
                    if (result.code === 1) {
                        var dom_channel = document.getElementById("container_channel");
                        var myChart_channel = echarts.init(dom_channel);
                        var data_channel_elimination = eval('(' + result.data + ')');;
                        var channel_count =[];
                        var channel_name =[];
                        for(var i=0; i < data_channel_elimination.length; i++){

                            channel_name[i] = data_channel_elimination[i].name;
                            channel_count[i] = data_channel_elimination[i].value;

                        }
                        option = null;
                        option = {
                            color: ['#3398DB'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },

                            legend: {
                                right: 10,
                                data: ['客户数量']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: channel_name,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '客户数量',
                                    barWidth: '40%',
                                    type: 'bar',
                                    data:channel_count
                                }
                            ]
                        };
                        if (option && typeof option === "object") {
                            myChart_channel.setOption(option, true);
                        }


                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });

        });
        //清除
        $('#clear').click(function () {
            $('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            })
            tableIns_channel.reload({
                where: {
                    'start_date': '',
                    'end_date': '',
                    'date_range':'',
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            var dom_channel = document.getElementById("container_channel");
            var myChart_channel = echarts.init(dom_channel);
            var data_channel_elimination = eval('{$enrollment_channel_report}');
            var channel_count =[];
            var channel_name =[];
            for(var i=0; i < data_channel_elimination.length; i++){

                channel_name[i] = data_channel_elimination[i].name;
                channel_count[i] = data_channel_elimination[i].value;

            }
            option = null;
            option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                legend: {
                    right: 10,
                    data: ['客户数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: channel_name,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '客户数量',
                        barWidth: '40%',
                        type: 'bar',
                        data:channel_count
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart_channel.setOption(option, true);
            }

        });


        //监听工具条
        table.on('tool(Event_infos)', function (obj) {
            var data = obj.data; //获得当前行数据

            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'see_info'){
                layer.open({
                    skin: 'layui-layer-lan',
                    type: 2,
                    closeBtn: 2,
                    title: data.name+'--漏斗分析',
                    area: ['98%', '95%'],
                    shadeClose: false,
                    content: "{:url('enrollment/campus_report')}?campus_id="+data.id,
                });
            }
        });


        //数据表格 方法级渲染 来源渠道分析
        var tableIns_level = table.render({
            elem: '#LAY_table_user_level'
            , url: '{:url("enrollment/getstudentlevellist")}'
            , method: 'POST'
            , toolbar: 'true' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['print', 'exports'] // 筛选图标
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                {field: 'name', title: '客户成熟度', style:'color:#01AAED;font-weight: bold;', align: 'center'
                },{field: 'count', title: '客户数量', align: 'center'
                },{field: 'rate', title: '比例',   align: 'center'
                }
            ]]
            , height: 'full-180'
            // , page: false
            , title: '客户成熟度'
            , limits: [10,20,30,40,50,60,70,80,90,10000000]
            , done: function () {
                layer.close(loading);
            }
        });

        //日期
        laydate.render({
            elem: '#range_date_level',
            range: true
            ,trigger: 'click'
        });

        //搜索项
        $('#search_level').click(function () {
            var field = {};
            var create_date_rang = $('input[name=date_range_level]').val();
            if(create_date_rang.length > 0){
                strs_date=create_date_rang.split("-"); //字符分割
                field.start_date = strs_date[0]+'-'+strs_date[1]+'-'+strs_date[2];
                field.end_date = strs_date[3]+'-'+strs_date[4]+'-'+strs_date[5];
            }
            console.log(field);
            tableIns_level.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            $.ajax({
                url: '/admin/enrollment/searchstudentlevellist',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    //      layer.msg(result.msg);
                    if (result.code === 1) {
                        var dom_level = document.getElementById("container_level");
                        var myChart_level = echarts.init(dom_level);

                        var enrollment_intentional_report = eval('(' + result.data + ')');;
                        var enrollment_intentiona_data =[];
                        var enrollment_intentiona_name = [];
                        for(var i=0; i < enrollment_intentional_report.length; i++){
                            var row = {};
                            row['value'] = enrollment_intentional_report[i].value;
                            row['name'] = enrollment_intentional_report[i].name;
                            enrollment_intentiona_name[i] = enrollment_intentional_report[i].name;
                            enrollment_intentiona_data[i] = row;
                        }


                        option = null;
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                x: 'right',
                                data:enrollment_intentiona_name
                            },
                            series: [
                                {
                                    name:'客户成熟度',
                                    type:'pie',
                                    radius: ['50%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        normal: {
                                            show: false,
                                            position: 'center'
                                        },
                                        emphasis: {
                                            show: true,
                                            textStyle: {
                                                fontSize: '30',
                                                fontWeight: 'bold'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    data:enrollment_intentiona_data
                                }
                            ]
                        };
                        if (option && typeof option === "object") {
                            myChart_level.setOption(option, true);
                        }
                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
        });

        //清除
        $('#clear_level').click(function () {
            $('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            })
            tableIns_level.reload({
                where: {
                    'start_date': '',
                    'end_date': '',
                    'date_range_level':'',
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            var dom_level = document.getElementById("container_level");
            var myChart_level = echarts.init(dom_level);

            var enrollment_intentional_report = eval('{$enrollment_intentional_report}');
            var enrollment_intentiona_data =[];
            var enrollment_intentiona_name = [];
            for(var i=0; i < enrollment_intentional_report.length; i++){
                var row = {};
                row['value'] = enrollment_intentional_report[i].value;
                row['name'] = enrollment_intentional_report[i].name;
                enrollment_intentiona_name[i] = enrollment_intentional_report[i].name;
                enrollment_intentiona_data[i] = row;
            }


            option = null;
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data:enrollment_intentiona_name
                },
                series: [
                    {
                        name:'客户成熟度',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:enrollment_intentiona_data
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart_level.setOption(option, true);
            }

        });
    });
</script>
